﻿@page "/layout"

<div class="wrapper">
    <div class="tabs">
        <div class="tab">
            <input type="radio" name="css-tabs" id="tab-1" checked class="tab-switch">
            <label for="tab-1" class="tab-label">Flexbox</label>
            <div class="tab-content">
                <Flexbox />
            </div>
        </div>
        <div class="tab">
            <input type="radio" name="css-tabs" id="tab-2" class="tab-switch">
            <label for="tab-2" class="tab-label">Grid</label>
            <div class="tab-content">
                <Grid />
            </div>
        </div>
        <div class="tab">
            <input type="radio" name="css-tabs" id="tab-3" class="tab-switch">
            <label for="tab-3" class="tab-label">Float</label>
            <div class="tab-content">
                <Float />
            </div>
        </div>
       <div class="tab">
            <input type="radio" name="css-tabs" id="tab-4" class="tab-switch">
            <label for="tab-4" class="tab-label">Position</label>
            <div class="tab-content">
                <Position />
            </div>
        </div>
        <div class="tab">
            <input type="radio" name="css-tabs" id="tab-5" class="tab-switch">
            <label for="tab-5" class="tab-label">Column</label>
            <div class="tab-content">
                <Column />
            </div>
        </div>
        <div class="tab">
            <input type="radio" name="css-tabs" id="tab-6" class="tab-switch">
            <label for="tab-6" class="tab-label">Layout</label>
            <div class="tab-content">
                <Layout />
            </div>
        </div>
    </div>
</div>

<style>


    .wrapper {
       
    }

    .tabs {
        position: relative;
      /*  margin: 3rem 0;*/
        height:80rem;
   /*     background: #1abc9c;*/
    }

        .tabs::before,
        .tabs::after {
            content: "";
            display: table;
        }

        .tabs::after {
            clear: both;
        }

    .tab {
        float: left;
    }

    .tab-switch {
        display: none;
    }

    .tab-label {
        position: relative;
        display: block;
        line-height: 2.75em;
        height: 3em;
        padding: 0 1.618em;
        background: #1abc9c;
        border-right: 0.125rem solid #16a085;
        color: #fff;
        cursor: pointer;
        top: 0;
        transition: all 0.25s;
    }

        .tab-label:hover {
            top: -0.25rem;
            transition: top 0.25s;
        }

    .tab-content {
       /* height: 12rem;*/
        position: absolute;
        z-index: 1;
        top: 2.75em;
        left: 0;
        padding: 1.618rem;
        background: #fff;
        color: #2c3e50;
     /*   border-bottom: 0.25rem solid #bdc3c7;*/
        opacity: 0;
        transition: all 0.35s;
    }

    .tab-switch:checked + .tab-label {
        background: #fff;
        color: #2c3e50;
        border-bottom: 0;
        border-right: 0.125rem solid #fff;
        transition: all 0.35s;
        z-index: 1;
        top: -0.0625rem;
    }

    .tab-switch:checked + label + .tab-content {
        z-index: 2;
        opacity: 1;
        transition: all 0.35s;
    }
</style>

@code {

}
